<template>
  <div class="table">
    <el-input
      class="search"
      placeholder="请输入学工号/姓名/手机号/房间号"
      v-model="searchText"
    >
    </el-input>
    <el-button icon="el-icon-search" circle @click="handleSearch"></el-button>
    <el-button icon="el-icon-s-home" circle @click="handleHome"></el-button>

    <!-- 主页面 -->
    <el-table
      :data="
        tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
      "
      v-if="tableData.length > 0 && tableData[0] !== undefined"
    >
      <!-- <el-table-column prop="orderNumber" label="订单号"></el-table-column> -->
      <el-table-column prop="orderlist" label="订单号"></el-table-column>
      <el-table-column prop="account" label="学工号"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="phone" label="手机号"></el-table-column>
      <el-table-column prop="building" label="楼栋"></el-table-column>
      <el-table-column prop="roomnumber" label="房间号"></el-table-column>
      <el-table-column prop="end_Time" label="截止时间"></el-table-column>
      <el-table-column prop="department" label="部门"></el-table-column>
      <el-table-column prop="money" label="金额"></el-table-column>
    </el-table>

    <el-alert v-else title="无数据" type="info" show-icon>
      暂无数据
    </el-alert>

    <el-pagination
      class="pagination"
      background
      layout="total, prev, pager, next"
      :current-page="currentPage"
      :total="total"
      :page-size="pageSize"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
  </div>
</template>

<script>
import { getorderList } from '@/api/floor.js'
export default {
  name: 'OrderTable',
  data() {
    return {
      searchText: '',
      // 表格显示的数据源
      tableData: [],
      baseData: [],
      currentPage: 1, //当前页 默认在第一页
      total: 0, //总共的数据
      pageSize: 10 //页容量
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      // 订单接口
      getorderList(this.searchText).then(res => {
        this.baseData = res.data.orderList
        this.total = this.tableData.length
        this.tableData = this.baseData
      })
    },
    // 搜索功能
    handleSearch() {
      if(this.searchText==''){
        this.$message({
          showClose: true,
          message: '输入框不能为空',
          type: 'error'
        });
        return;
      }
        this.fetchData()
      this.searchText=''
        },    
        // 返回主页
    handleHome() {
      this.fetchData()
      this.total = this.tableData.length
    },
    handleCurrentChange(val) {
      this.currentPage = val
    }
  }
}
</script>

<style scoped>
.table {
  margin: 30px;
  /* box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); */
}
.search {
  width: 400px;
  margin: 20px 20px 20px 0px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
</style>
